<template>
  <view class="ranking-section">
    <image src="/static/img/rankingBg.png" class="ranking-bg" />
    <view class="ranking-content">
      <view class="ranking-tabs">
        <text v-for="(tab, index) in rankingTabs" :key="index"
          :class="{ 'tab-item': true, 'active': currentTabIndex === index }" @click="handleTabChange(index)">
          {{ tab }}
        </text>
      </view>

      <view class="ranking-cards" :class="{ 'ranking-person': isPerson }">
        <!-- 写死 rankClass 和 badgeIcon -->
        <view class="ranking-card second">
          <image class="rank-badge " src="/static/icons/top2.svg"></image>
          <image class="club-image" :src="rankingData.second.img" mode="aspectFill"></image>
          <view class="club-name">{{ rankingData.second.name }}</view>
          <view class="club-km">{{ rankingData.second.text }} </view>
          <view class="club-score">
            <image class="score-icon2" src="/static/img/money2.png" v-if="isPerson"></image>
            <image class="score-icon" src="/static/img/money.png" v-else></image>
            {{ rankingData.second.score }}
          </view>
        </view>
        <view class="ranking-card first">
          <image class="rank-badge" src="/static/icons/top1.svg"></image>
          <image class="club-image" :src="rankingData.first.img" mode="aspectFill"></image>
          <view class="club-name">{{ rankingData.first.name }}</view>
          <view class="club-km">{{ rankingData.first.text }} </view>
          <view class="club-score">
            <image class="score-icon2" src="/static/img/money2.png" v-if="isPerson"></image>
            <image class="score-icon" src="/static/img/money.png" v-else></image>
            {{ rankingData.first.score }}
          </view>
        </view>
        <view class="ranking-card third">
          <image class="rank-badge" src="/static/icons/top3.svg"></image>
          <image class="club-image" :src="rankingData.third.img" mode="aspectFill"></image>
          <view class="club-name">{{ rankingData.third.name }}</view>
          <view class="club-km">{{ rankingData.third.text }} </view>
          <view class="club-score">
            <image class="score-icon2" src="/static/img/money2.png" v-if="isPerson"></image>
            <image class="score-icon" src="/static/img/money.png" v-else></image>
            {{ rankingData.third.score }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, defineEmits } from 'vue'
const rankingTabs = ref(['球馆排名', '公会排名', '个人排名', '裁判排名'])
const currentTabIndex = ref(0)
const isPerson = computed(() => currentTabIndex.value === 2 || currentTabIndex.value === 3)
const rankingData = ref({
  second: {
    img: '/static/2.png',
    name: '鲁足台球俱乐部',
    text: "临沂市 10.4km",
    score: 14200
  },
  first: {
    img: '/static/1.png',
    name: '逸乐台球俱乐部 奥斯卡店',
    text: "临沂市 10.4km",
    score: 9800
  },
  third: {
    img: '/static/3.png',
    name: '火凤凰台球俱乐部',
    location: '莒南',
    text: "临沂市 10.4km",
    score: 9800
  }
})
const emit = defineEmits(['change'])
function handleTabChange(index) {
  currentTabIndex.value = index
  emit('change', index)
}
</script>

<style lang="scss" scoped>
.ranking-section {
  position: relative;
  padding-top: 168rpx;
  margin-top: 34rpx;
  height: 730rpx;

  .ranking-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .ranking-content {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.65);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    border: 2rpx solid rgba(255, 255, 255, 0.9);
    padding: 20rpx 0 0 0;
  }

  .ranking-tabs {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    height: 92rpx;

    .tab-item {
      flex: 1;
      text-align: center;
      font-size: 30rpx;
      color: #606266;
      line-height: 44rpx;
      position: relative;
      line-height: 92rpx;

      &.active {
        color: #E10509;

        &:after {
          content: '';
          display: block;
          position: absolute;
          width: 64rpx;
          height: 6rpx;
          background: #E10509;
          border-radius: 200rpx 200rpx 200rpx 200rpx;
          bottom: 8rpx;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }

  .ranking-cards {
    display: flex;
    gap: 0 14rpx;
    padding: 0 20rpx;
    margin-top: 44rpx;




    .ranking-card {
      flex: 1;
      border-radius: 100rpx 100rpx 0rpx 0rpx;
      padding: 0 10rpx;
      text-align: center;
      position: relative;
      height: 370rpx;

      &.first {
        background: linear-gradient(180deg, #FFF7D9 0%, #FFFFFF 82%);

        .club-image {
          border-color: #FFD440;
        }
      }

      &.second {
        background: linear-gradient(180deg, #EBF1F8 0%, #FFFFFF 82%);

        .club-image {
          border-color: #AAC4E2;
        }
      }

      &.third {
        background: linear-gradient(180deg, #FEF0E9 0%, #FFFFFF 82%);

        .club-image {
          border-color: #F49166;
        }
      }

      .rank-badge {
        width: 66rpx;
        height: 34rpx;
        top: -17rpx;
        position: relative;
      }

      .club-image {
        width: 128rpx;
        height: 128rpx;
        border-radius: 10rpx 10rpx 10rpx 10rpx;
        border: 4rpx solid transparent;
        display: block;
        margin: 0 auto 22rpx auto;
      }

      .club-name {
        font-size: 30rpx;
        color: #303133;
        line-height: 36rpx;
        height: 72rpx;
        margin-bottom: 8rpx;
        // 最多显示两行
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .club-km {
        font-size: 24rpx;
        color: #909399;
        line-height: 32rpx;
        margin-bottom: 16rpx;
      }

      .club-score {
        font-weight: 500;
        font-size: 30rpx;
        color: #E10509;
        line-height: 32rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0 10rpx;

        .score-icon {
          width: 40rpx;
          height: 32rpx;
        }

        .score-icon2 {
          width: 44rpx;
          height: 44rpx;
        }
      }
    }
  }

  .ranking-person {
    .ranking-card {
      .club-image {
        border-radius: 50%;
      }

      .club-name {
        //最多一行
        -webkit-line-clamp: 1;
        height: auto;

      }
    }
  }
}
</style>